<template>
	<view class="content">
		<view style="text-align: center;position: relative;margin-top: -80px;background-color: #FFFFFF;">
			<span style="font-size: 18px;font-weight: 600;height: 30px;line-height: 30px;">课程详情</span>
			<view style="position: relative;margin-right: -280px;margin-top: -30px;padding-left: 20px;">
				<image src="../../static/img/tabbar/shuxie.png" style="width: 28px;height: 28px;position: relative;margin-right: 20px;"></image>
				<image src="../../static/img/tabbar/fenxiang.png" style="width: 28px;height: 28px; position: relative;margin-right: 20px;"></image>
			</view>
			
		</view>
		<view class="image">
			<image class="img" src="https://img.xiaopiu.com/userImages/img33715f0b50ab48.jpg" mode="widthFix"></image>
		</view>
		<view class="text">
			<p>未开始学习</p>
			<button type="primary" plain="true">开始学习</button>
		</view>
		<view class="tabs">
			<liuyuno-tabs :tabData="['介绍', '目录', '评价']" :activeIndex="activeIndex" @tabClick="tabClick($event, '固定item宽度')" />
		</view>
		<view v-if="selected == 0 ">
			<view class="kechengone">
				<p style="margin-left: -250px;font-size: 18px;">跟简七学理财</p>
				<view  class="jieshao">
					<view class="icon">
					<uni-icons type="star-filled" size="16" color="#33B17B" ></uni-icons>
					<uni-icons type="star-filled" size="16" color="#33B17B" style="margin-left: 5px;"></uni-icons>
					<uni-icons type="star-filled" size="16" color="#33B17B" style="margin-left: 5px;"></uni-icons>
					<uni-icons type="star-filled" size="16" color="#33B17B" style="margin-left: 5px;"></uni-icons>
					<uni-icons type="star-filled" size="16" color="#33B17B" style="margin-left: 5px;"></uni-icons>
					</view>
					
					<p>4.8</p>
					<p>10143人学过</p>
					<p class="dujia">独家</p>
				</view>
				
			</view>	
			<h3 style="background-color: #FFFFFF;height: 50px;line-height: 50px;text-align: left;color: #FFAAAA;">￥398.00</h3>
			<view class="wenzi">
				<view class="shiyong">
				   <p>适用人群</p>
				   <p style="font-size: 14px;margin-top: 10px;">零基础小白学理财,这门课就够了</p>
				</view>
				<view class="person">
					 <p>课程介绍</p>
					 <p style="font-size: 14px;margin-top: 10px;">2017年9月12日-9月22日，4周年重磅回馈</p>
					 <p style="font-size: 14px;">5折秒杀，低价史无前例，买到即赚到！</p>
					 <p style="margin-top: 15px;">
						1、课程是录播还是直播？
						课程采取录播视频+线上作业+直播答疑的形式。
						课程一旦购买后，需在规定时间内完成学习，然后提交作业并参加考试，每一科目都完成后才能进入最后的实践课程，即大作业！完成大作业，达到相应的分数，就可得获得相应科目的职业证书。
						简言之，就是你可以自主安排时间学习教学视频；但需注意在规划的学习周期内完成作业，参加考试。
						2、课程是不是可以一直看？
						产品经理（网易），前端开发，Java开发（web方向），UI设计师，交互设计师、GeekBand微专业课程视频是可以永久观看的。 
						其它微专业课程视频由具体微专业开课讲师规定。例如高级人力资源微专业是观看1年；如后期有更改，页面上会标注，但不会影响本期的视频观看时间。 
						视频之外的在线服务如考试和在线辅导等仅限于本学期。 
					 </p>
				</view>
				
			</view>
	    </view>
		<view v-if="selected == 1 ">
			lingge
		</view>
		<view v-if="selected == 2 ">
			saneg
		</view>
	</view>
	
</template>

<script>
    import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components: {
			liuyunoTabs,
			uniIcons
		},
		data() {
			return {
				selected: 0,
				activeIndex: 0,
			}
		},
		onLoad() {

		},
		methods: {
                 tabClick(index, name) {
					// 点击的index
					this.selected = index;
				}
				
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 1800upx;
		margin-top: 200upx;
		background-color: #F2F4F8;
	}
    .image{
		border:2px solid #F5F6F8;
		
		width: 372px;
		height: 220px;
		background-color: #FFFFFF;
	}
	.img{
		width: 100%;
		height: 100%;
		background-size: cover;
		
	   -webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
	     widthfilter: blur(15px);
    }
	.text{
		text-align: center;
		margin-top: -150px;
		margin-left: 150px;
		position: absolute;
		z-index: 999;
	}
	.text p{
		color:#FFFFFF;
		font-size: 15px;
	}
	.text button{
		margin-top: 10px;
		color: #33AD79;
		border-color: #33AD79;
		height: 40px;
		line-height: 40px;
	}
	.tabs{
		border-bottom: #F7F9F9;
		background-color: #FFFFFF;
	}
	.jieshao{
		display: flex;
		height: 40px;
	}
	.jieshao p{
		font-size: 13px;
		text-align: center;
		margin-left: 40px;
		
	}
	.icon{
		margin-left: 10px;
		margin-top: 10px;
		
	}
	
	.kechengone{
		width:372px;
		height: 100px;
		border:2px solid #F5F6F8;
		background-color: #FFFFFF;
	}
	.kechengone p{
		margin-top: 12px;
		
	}
	.dujia{
		width: 33px;
			height: 19px;
			left: 326px;
			top: 163px;
			color: rgba(42, 130, 228, 1);
			border-radius: 2px;
			font-size: 13px;
			line-height: 150%;
			border: rgba(87, 153, 226, 1) solid 1px;
			text-align: center;
	}
	.shiyong{
		text-align: left;
		padding-left: 10px;
		color:#808080;
		border-bottom: 2px solid #F7F9F9;
		padding-top: 10px;
		height: 50px;
		padding-bottom: 10px;
	}
	.person{
		text-align: left;
		padding-left: 10px;
		color:#808080;
		padding-top: 10px;
		
	}
	
	.wenzi{
		height: 600px;
		width: 372px;
		background-color: #FFFFFF;
		margin-top: 20px;
	}
</style>
